<template>
  <div class="pages-wrapper">
    <div class="pages-header">
      <div class="header-back" @click="handleBack">
        <img src="@/assets/icon-ai-back.png" class="icon-back" />
        返回
      </div>
      <div class="header-title">{{ title }}</div>
    </div>
    <div class="pages-main">
      <div class="sider-bar-left">
        <div class="bar-box">
          <div
            class="bar-item"
            v-for="(item, index) in leftOptions"
            :key="index"
            :class="{ cur: index == leftCurIndex }"
            @click="handleChangeLeft(index)"
          >
            <img
              :src="item.curIcon"
              v-if="leftCurIndex == index"
              class="bar-icon"
            />
            <img :src="item.icon" v-else class="bar-icon" />
            <div class="bar-title">{{ item.name }}</div>
          </div>
        </div>
        <div class="popup-box" :style="`width:${showPoup ? 400 : 0}px ;`">
          <div class="poup-content">
            <div class="poup-title">{{ leftContent?.name }}</div>
            <div class="poup-text" v-html="leftContent?.content"></div>
            <!-- <div class="poup-image"></div> -->
          </div>
        </div>
      </div>
      <div class="pages-iframe">
        <iframe class="iframe" v-if="isShow" :src="iframeUrl" />
      </div>
      <div class="pages-footer">
        {{ company_info}}
      </div>
      <div class="sider-bar-right">
        <div
          class="sider-item"
          v-for="(item, index) in rightOptions"
          :key="index"
          :class="{ cur: item.checked }"
          @click="handleChangeRight(index)"
        >
          <img :src="item.curIcon" v-if="item.checked" class="bar-icon" />
          <img :src="item.icon" v-else class="bar-icon" />
          <div class="bar-title">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <audio ref="audioPlayer" :src="currentSong"></audio>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import api from "@/api";
const router = useRouter();
const query = computed(() => router.currentRoute.value.query);
const leftCurIndex = ref(-1);
const iframeUrl = ref("");
const leftOptions = ref([
  {
    name: "仪器介绍",
    content: null,
    icon: "./icons/icon-instrument-left-1.png",
    curIcon: "./icons/icon-instrument-left-1-cur.png",
  },
  {
    name: "实验内容",
    content: null,
    icon: "./icons/icon-instrument-left-2.png",
    curIcon: "./icons/icon-instrument-left-2-cur.png",
  },
  {
    name: "配置参数",
    content: null,
    icon: "./icons/icon-instrument-left-3.png",
    curIcon: "./icons/icon-instrument-left-3-cur.png",
  },
  // {
  //   name: "仪器介绍",
  //   content:"",
  //   icon: "./icons/icon-instrument-left-4.png",
  //   curIcon: "./icons/icon-instrument-left-4-cur.png",
  // },
]);
const showPoup = ref(false);
const leftContent = ref(null);
const handleChangeLeft = (index) => {
  if (leftCurIndex.value == index) {
    leftCurIndex.value = -1;
    showPoup.value = false;
    leftContent.value = null;
  } else {
    showPoup.value = true;
    leftCurIndex.value = index;
    leftContent.value = leftOptions.value[index];
  }
};
const rightCurIndex = ref(-1);
const rightOptions = ref([
  {
    name: "全屏",
    checked: false,
    icon: "./icons/icon-instrument-right-1.png",
    curIcon: "./icons/icon-instrument-right-1-cur.png",
  },
  {
    name: "背景音乐",
    checked: false,
    icon: "./icons/icon-instrument-right-2.png",
    curIcon: "./icons/icon-instrument-right-2-cur.png",
  },
  {
    name: "自动轮播",
    checked: false,
    icon: "./icons/icon-instrument-right-3.png",
    curIcon: "./icons/icon-instrument-right-3-cur.png",
  },
  {
    name: "切换",
    checked: false,
    icon: "./icons/icon-instrument-right-4.png",
    curIcon: "./icons/icon-instrument-right-4-cur.png",
  },
  // {
  //   name: "模型分解",
  //   icon: "./icons/icon-instrument-right-5.png",
  //   curIcon: "./icons/icon-instrument-right-5-cur.png",
  // },
]);

const handleChangeFullScreen = () => {
  //全屏
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else if (document.mozFullScreenElement) {
    document.mozCancelFullScreen();
  } else if (document.webkitFullscreenElement) {
    document.webkitExitFullscreen();
  } else if (document.msFullscreenElement) {
    document.msExitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
};
const handleChangeMusic = () => {
  if (rightOptions.value[1].checked == true) {
    playMusic();
  } else {
    stopMusic();
  }
};
const timer = ref(null);

const handleChangeAutoPlay = () => {
  if (rightOptions.value[2].checked == true) {
    timer.value = setInterval(() => {
      handleChangeSwitch();
    }, 5000);
  } else {
    clearInterval(timer.value);
    timer.value = null;
  }
};
const handleChangeSwitch = async () => {
  //切换模型,listData中下一个，如果没有下一个就回到第一个
  curIndex.value++;
  if (curIndex.value >= listData.value.length) {
    curIndex.value = 0;
  }
  let id = listData.value[curIndex.value].instrument_id;
  isShow.value = false;
  await getData(id);
  rightOptions.value[3].checked = false;
};
const handleChangeRight = (index) => {
  rightOptions.value[index].checked = !rightOptions.value[index].checked;
  switch (index) {
    case 0:
      handleChangeFullScreen();
      break;
    case 1:
      handleChangeMusic();
      break;
    case 2:
      handleChangeAutoPlay();
      break;
    case 3:
      handleChangeSwitch();
      break;
  }
  // if (index == 3) {
  //   if (
  //     iframeUrl.value ==
  //     "https://lib.fantasy-lab.com/3d/index.html?murl=models/Mikegansheyi/Maikegansheyi_dizuo/Maikegansheyi_dizuo.gltf"
  //   ) {
  //     iframeUrl.value =
  //       "https://lib.fantasy-lab.com/3d/index.html?murl=3dgs/black.ksplat";
  //   } else {
  //     iframeUrl.value =
  //       "https://lib.fantasy-lab.com/3d/index.html?murl=models/Mikegansheyi/Maikegansheyi_dizuo/Maikegansheyi_dizuo.gltf";
  //   }
  // }
};
const handleBack = () => {
  router.go(-1);
};
const audioPlayer = ref(null);
const currentSong = ref("");
const playMusic = () => {
  audioPlayer.value.play();
};
const stopMusic = () => {
  audioPlayer.value.pause();
};
const loadMusic = () => {
  audioPlayer.value.load();
};
const listData = ref([]);
const total = ref(0);
const curIndex = ref(0);
const getListData = async () => {
  let params = {
    current: 1,
    pageSize: 9999,
  };
  const res = await api.apiInstrumentPagedListPost({
    args: params,
  });
  total.value = res.data.total;
  listData.value = res.data.data;
  curIndex.value = listData.value.findIndex(
    (item) => item.instrument_id == query.value.id
  );
};
const title = ref("");
const isShow= ref(false);
const company_info = ref('')
const getData = async (id) => {
  let params = {
    instrument_id: id,
  };
  const res = await api.apiInstrumentFetchModelPost(params);
  console.log(res.data);
  company_info.value = res.data?.company_info;
  leftOptions.value[0].content = res.data?.introduce;
  leftOptions.value[1].content = res.data?.experiment;
  leftOptions.value[2].content = res.data?.remark;
  title.value = res.data?.name;
  currentSong.value = res.data?.music_url;
  iframeUrl.value = `https://lib.fantasy-lab.com/3d/index.html?murl=${res.data?.model_url}`;
  isShow.value = true;
  // if (type == 1) {
  //   currentSong.value =
  //     "https://st.92kk.com/2023/%E5%9B%BD%E6%BD%AE%E6%94%B9%E7%89%88/202309/20230921/%E6%96%87%E5%A4%AB-%E9%AA%97%E5%AD%90[Dj%E9%98%BF%E5%8D%8E_Electro_Rmx_2023]MP3%E4%B8%8B%E8%BD%BD%E5%9C%A8%E7%BA%BF%E8%AF%95%E5%90%AC.mp3";
  // } else {
  //   currentSong.value =
  //     "https://st.92kk.com/2023/%E5%9B%BD%E6%BD%AE%E6%94%B9%E7%89%88/202309/20230913/%E4%BB%BB%E5%A4%8F-%E5%B8%83%E6%B4%9B%E8%8A%AC%E7%9A%84%E6%82%B2%E4%BC%A4[%E5%A8%81%E9%9F%B3Dj%E5%8D%8E%E4%BB%94_Electro_Rmx_2023]MP3%E4%B8%8B%E8%BD%BD%E5%9C%A8%E7%BA%BF%E8%AF%95%E5%90%AC.mp3";
  // }

  currentSong.value =
    "https://st.92kk.com/2023/%E5%9B%BD%E6%BD%AE%E6%94%B9%E7%89%88/202309/20230913/%E4%BB%BB%E5%A4%8F-%E5%B8%83%E6%B4%9B%E8%8A%AC%E7%9A%84%E6%82%B2%E4%BC%A4[%E5%A8%81%E9%9F%B3Dj%E5%8D%8E%E4%BB%94_Electro_Rmx_2023]MP3%E4%B8%8B%E8%BD%BD%E5%9C%A8%E7%BA%BF%E8%AF%95%E5%90%AC.mp3";

  if (currentSong.value) {
    await loadMusic();
    await handleChangeMusic();
  }
};
onMounted(async () => {
  await getData(query.value.id);
  await getListData();
});
</script>
<style lang="less" scoped>
.pages-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-image: radial-gradient(
    circle at 50% 46%,
    #3c3c3c 0%,
    #000000 100%
  );
  .pages-header {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 40px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 9;
    .header-back {
      left: 16px;
      top: 16px;
      width: 78px;
      height: 40px;
      position: absolute;
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #31323a;
      letter-spacing: 0;

      cursor: pointer;
      z-index: 10;
      .icon-back {
        width: 20px;
        height: 20px;
      }
    }
    .header-title {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
    }
  }
  .pages-footer{
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    color:#fff;
    font-size: 16px;
    line-height: 36px;
  }
  .pages-main {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
  }
  .sider-bar-left {
    margin-right: 60px;

    transition: all 0.7s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bar-box {
      .bar-item {
        width: 70px;
        height: 70px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.7s ease-in-out;
        .bar-icon {
          height: 32px;
        }
        .bar-title {
          display: none;
          width: 0;
        }
        &.cur {
          width: 164px;
          background: #ffffff;
          .bar-title {
            display: block;
            word-break: keep-all;

            width: auto;
            margin-left: 14px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 20px;
            color: #2776ff;
            letter-spacing: 0;
          }
        }
      }
    }
    .popup-box {
      width: 400px;
      transition: all 2s ease-in-out;
      margin-left: 61px;
      word-break: keep-all;
      white-space: pre-line;
      overflow: hidden;
      .poup-title {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        margin-bottom: 12px;
      }
      .poup-text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        width: 400px;
        overflow-x: hidden;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        p {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          word-break: keep-all;
        }
      }
      .poup-image {
        background: rgba(255, 255, 255, 0.1);
        height: 200px;
      }
    }
  }
  .pages-iframe {
    flex: 1;
    transition: all 0.7s ease-in-out;
    height: 90vh;
    .iframe {
      width: 100%;
      border: 0;
      height: 100%;
    }
  }
  .sider-bar-right {
    width: 70px;
    margin-left: 155px;
    .sider-item {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      margin-bottom: 16px;
      cursor: pointer;
      .bar-icon {
        width: 70px;
        height: 70px;
      }
      .bar-title {
        display: none;
      }
    }
  }
}
</style>
